<template>
  <view class="completed-reviews-page">
    <!-- 自定义导航栏 -->
    <custom-navbar title="已完成订单"></custom-navbar>

    <!-- 订单信息卡片 -->
    <view class="order-info-card">
      <view class="card-header">
        <text class="card-title">订单信息</text>
        <view class="status-tag completed">
          <text>已完成</text>
        </view>
      </view>
	  <view class="divider"></view>
      <view class="card-content">
        <view class="info-item">
          <text class="info-label order-no-label">订单号:</text>
          <text class="info-value order-no-value">{{ currentOrder.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">服务项目:</text>
          <text class="info-value">{{ currentOrder.serviceName }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">服务门店:</text>
          <text class="info-value">{{ currentOrder.storeName }}</text>
          <image class="nav-icon" src="/static/plane.png" mode="aspectFit"></image>
        </view>
        <view class="info-item">
          <text class="info-label">下单时间:</text>
          <text class="info-value">{{ currentOrder.orderTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">预约时间:</text>
          <text class="info-value">{{ currentOrder.appointmentTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">车辆:</text>
          <text class="info-value">{{ currentOrder.vehicle }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">备注:</text>
          <text class="info-value">{{ currentOrder.remarks || '' }}</text>
        </view>
      </view>
    

    <!-- 订单详情卡片 -->
   
		  <view class="card-header">
			  <text class="card-title">订单详情</text>
		  </view>
      <view class="divider"></view>
		  <view class="card-content">
			<view class="detail-item">
			  <text class="detail-label">{{ currentOrder.serviceItem }}</text>
			  <text class="detail-value">¥{{ currentOrder.servicePrice }}</text>
			</view>
			<view class="detail-item">
			  <text class="detail-label">车辆附加费用</text>
			  <text class="detail-value">{{ currentOrder.additionalFee }}</text>
			</view>
			<view class="divider1"></view>
			<view class="detail-item">
			  <text class="detail-label">原价</text>
			  <text class="detail-value">¥{{ currentOrder.originalPrice }}</text>
			</view>
			<view class="detail-item">
			  <text class="detail-label">店家优惠</text>
			  <text class="detail-value discount">- ¥{{ currentOrder.storeDiscount }}</text>
			</view>
			<view class="detail-item">
			  <text class="detail-label">优惠券</text>
			  <text class="detail-value discount">- ¥{{ currentOrder.couponDiscount }}</text>
			</view>
			<view class="divider1"></view>
			<view class="detail-item total">
			  <text class="detail-label">支付金额</text>
			  <text class="detail-value total-amount">¥{{ currentOrder.totalAmount }}</text>
			</view>
		  </view>
    </view>

    <!-- 评价结果卡片 -->
    <view class="review-result-card">
      <view class="card-header">
        <text class="card-title">评价结果</text>
      </view>
      <view class="card-content">
        <view class="info-item">
          <text class="info-label">评价时间:</text>
          <text class="info-value">{{ currentOrder.reviewTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">评价结果:</text>
          <text class="stars">{{ getStars(currentOrder.rating) }}</text>
        </view>
        <view class="info-item review-comment">
          <text class="info-label">评语:</text>
          <text class="info-value">{{ currentOrder.reviewComment }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
    'custom-navbar': () => import('@/components/custom-navbar.vue')
  },
  data() {
    return {
      reviewId: null, // 接收传递的评价ID
      currentOrder: {
        orderNo: '121212112487878',
        serviceName: '车辆保养',
        storeName: '大宝车辆维修店',
        orderTime: '2023-03-08 17:40',
        appointmentTime: '2023-03-09 17:40',
        vehicle: '奔驰FWE4/豫A98FHJ',
        remarks: '',
        serviceItem: '车辆精洗',
        servicePrice: '39.90',
        additionalFee: '0',
        originalPrice: '59.90',
        storeDiscount: '20',
        couponDiscount: '10',
        totalAmount: '29.9',
        reviewTime: '2023-04-10 11:09',
        rating: 4,
        reviewComment: '评语评语评语评语评语评语评语评语评语'
      }
    }
  },
  onLoad(options) {
    // 接收传递的评价ID参数
    if (options.reviewId) {
      this.reviewId = options.reviewId;
      this.loadReviewDetail(options.reviewId);
    }
  },
  methods: {
    loadReviewDetail(reviewId) {
      // 根据评价ID加载对应的评价详情
      // TODO: 调用后端API获取订单详情
      console.log('加载评价详情:', reviewId);
    },
    
    getStars(rating) {
      let stars = '';
      for (let i = 1; i <= 5; i++) {
        if (i <= rating) {
          stars += '★';
        } else {
          stars += '☆';
        }
      }
      return stars;
    }
  }
}
</script>

<style lang="scss" scoped>
.completed-reviews-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  padding-top: calc(env(safe-area-inset-top) + 88rpx);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: calc(env(safe-area-inset-top) + 88rpx);
    left: 0;
    right: 0;
    height: 600px;
    background-image: linear-gradient(
      to bottom,
      #2f81fa 0%, #2f81fa 33.33%,
      #f7f7f7 33.33%, #f7f7f7 100% 
    );
    background-repeat: no-repeat;
    z-index: 0;
  }
}

/* 卡片通用样式 */
.order-info-card,
.order-details-card,
.review-result-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 20rpx 20rpx 16rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
}

.divider {
			height: 9rpx !important;
			background: #f0f0f0;
			margin-bottom: 16rpx;
			margin-left: 30rpx !important;
			margin-right: 30rpx !important;
}

.divider1 {
			height: 3rpx !important;
			background: #f0f0f0;
			margin-bottom: 16rpx;
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 32rpx 0 32rpx;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.status-tag {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.status-tag.completed {
  color: #e64e1b;
  background-color: #ffe8e0;
  font-weight: 500;
}

.completed-reviews-page .card-content {
	margin: 12rpx;
	font-weight: 400 !important;
	font-size: 20rpx !important;
	color: #3f3f3f !important;
  padding: 0 32rpx 32rpx 32rpx;
}

/* 订单信息卡片样式 */
.completed-reviews-page .info-item {
  
  margin-bottom: 16rpx;
  font-size: 30rpx !important;
}

.info-item:last-child {
  margin-bottom: 0;
}

.completed-reviews-page .info-label {
  color: #575757 !important;
  margin-right: 16rpx;
  font-weight: 400 !important;
  font-size: 24rpx !important;
}

.completed-reviews-page .info-label:not(.order-no-label) {
  margin-right: 24rpx;
}

.info-value {
  color: #575757;
  flex: 1;
  font-weight: 400 !important;
  font-size: 24rpx !important;
}

.order-no-label,
.order-no-value {
  color: #575757;
  font-weight: 400 !important;
  font-size: 24rpx !important;
}

.completed-reviews-page .nav-icon {
  width: 24rpx !important;
  height: 24rpx !important;
  margin-left: 20rpx !important;
}

/* 订单详情卡片样式 */
.completed-reviews-page .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 30rpx !important;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item.total {
  font-weight: bold;
  margin-bottom: 100rpx !important;
}

.completed-reviews-page .detail-label {
  color: #575757 !important;
  margin-right: 16rpx;
  font-weight: 400 !important;
  font-size: 24rpx !important;
}

.detail-value {
  
  color: #575757 ;
  margin-right: 16rpx;
  font-weight: 400 !important;
  font-size: 24rpx !important;
}

.detail-value.discount {
  color: #FF6B35;
}

.completed-reviews-page .detail-value.total-amount {
  font-size: 33rpx !important;
  font-weight: bold !important;
  color: #333333 !important;
}

.divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 16rpx 0;
}

/* 评价结果卡片样式 */
.completed-reviews-page .stars {
  color: #ffd700 !important;
  font-size: 36rpx !important;
}

.review-comment {
  align-items: flex-start;
}

.review-comment .info-value {
  flex: 1;
  margin-top: 4rpx;
}
</style>











